<!--
 * @Author: zhaozhehao zhaozhehao@erayt.com
 * @Date: 2023-06-05 15:02:08
 * @LastEditors: zhaozhehao zhaozhehao@erayt.com
 * @LastEditTime: 2023-06-05 15:50:07
 * @Description: 
 * 
-->
<template>
    <div>
        <video :style="{ width: '100%', height: '100%' }" controls class='video-demo' ref="liveVideo" />
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import flv from 'flv.js';
const liveVideo = ref()

let player = null;
let playerDom = document.getElementsByClassName('video-demo')[0];
console.log(playerDom)
let liveUrl = 'http://120.48.110.120:8000/live/stream.flv'
onMounted(() => {
    if (flv.isSupported()) {
        player = flv.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            hasVideo: true,
            url: liveUrl,
            cors: true
        }, {
            enableWorker: false,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range'
        });
        player.attachMediaElement(playerDom);
        player.load();

    } else {
        console.log('Your browser is not support flv.js');
    }
})
</script>

<style></style>